<template>
    <div @click="$emit('click')" class="hl-field" :class="{'margin':margin,'van-hairline--top':showTopBorder,'van-hairline--bottom':showBottomBorder}">
        <div class="prefix">
            <slot name="prefix">
                <div class="dot" :class="{'red':red}">
                </div>
            </slot>
        </div>
        <p class="hl-field-text" :class="value?'':'placeholder'">
            {{value?value:placeholder}}
        </p>
    </div>
</template>

<script>
    export default {
        name: "HlField",
        props: {
            placeholder: {
                default: ""
            },
            value: "",
            margin:{
                default: true
            },
            showTopBorder:false,
            red:{
                default:false
            },
            showBottomBorder:{
                default:true
            }
        }
    }
</script>

<style scoped lang="less">
    .hl-field {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        &.margin {
            margin: 0 16px;
        }
        .prefix {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            .dot {
                width: 8px;
                border-radius: 50%;
                height: 8px;
                background: #4cdb54;

                &.red {
                    background: #ff470b;
                }
            }
        }
        .hl-field-text {
            flex-direction: row;
            font-size: 14px;
            color: #444;
            white-space:nowrap;
            overflow: hidden;
            word-break: normal;
            text-overflow:ellipsis;
            margin: 0;
            &.placeholder {
                color: #888;
            }
        }
    }
</style>